<template>
  <div class="app-container">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="路线名称：" prop="">
          <el-input v-model="queryParams.name" placeholder="请填写" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <!-- <div class="listBox_head">
        <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增达人</el-button>
      </div> -->
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="路线ID" align="center" prop="id" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="标签" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="statusList" :value="scope.row.label" />
          </template>
        </el-table-column>
        <el-table-column label="路线名称" align="center" prop="name" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="绑定任务ID" align="center" prop="taskId" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="创建人" align="center" prop="createBy" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="350px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="joinDetails(scope.row)">查看路线详情</el-button>
            <el-button size="mini" type="text" @click="handleCopy(scope.row)">复制推广路径</el-button>
            <el-button size="mini" type="text" @click="editClick(scope.row)">绑定任务ID</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <Dialog :id="dialogId" :taskId="taskId" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible"
      @success="_handleSuccess">
    </Dialog>
  </div>
</template>
  
<script>
import {
  getList,
  deleteTalent
} from "@/api/setting/works";
import Dialog from "@/views/merchants/dataStatistics/talentVideoStatistics/components/dialog";
export default {
  name: "",
  components: {
    Dialog
  },
  data() {
    return {
      taskId: '',
      dialogId: '',
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 导出遮罩层
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      statusList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '', //行业名称
      }
    };
  },
  created() {
    this.getSelectList()
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then(response => {
        response.result.records.forEach(item => {
          for (var key in item) {
            if (item[key] === '') {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        console.log(this.total)
        this.loading = false;
      });
    },
    getSelectList() {
      //获取使用状态、支付状态字典
      var dictType = "douyin_video_talent_works_label";
      this.$getSelectList(dictType)
        .then((res) => {
          this.statusList = res.result[0].dictList;
        })
        .finally(() => {
        });
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: '',
      };
      // this.resetForm("form");
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.reset();
      this.handleQuery();
    },
    //新增
    addClick() {
      this.dialogId = null
      this.dialogVisible = true;
    },
    // 编辑
    editClick(row) {
      this.dialogId = row.id
      this.taskId = row.taskId
      this.dialogVisible = true;
    },
    _handleSuccess(e) {
      //成功回调
      // this.resetQuery()
      this.getList()
    },
    handleCopy(row) {
      this.copyCenter(`pages/subPackages/pagesA/footprintDetail/footprintDetail?workId=${row.id}`)
      // this.$message({
      //   message: "复制成功",
      //   type: "success",
      //   duration: 1500,
      // });
    },
    
    copyCenter(value) { //复制
        console.log(value)
        if(value==undefined||value==''){
          this.$message.error('复制失败,url地址不存在')
          return
        }
        //创建input标签
        var input = document.createElement('input')
        //将input的值设置为需要复制的内容
        input.value = value;
        //添加input标签
        document.body.appendChild(input)
        //选中input标签
        input.select()
        //执行复制
        document.execCommand('copy')
        //成功提示信息
        this.$message.success('复制成功')
        //移除input标签
        document.body.removeChild(input)
      },
    /** 查看明细 */
    joinDetails(row) {
      this.$router.push({
        path: "/setting/routeInfo",
        query: {
          id: row.id,
        },
      })
    }

  }
};

</script>
<style scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
  